import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3

Item {
    id: activities
    width: 800
    Item{
        id:classificationItem
        width: activities.width * 0.2
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        TreeView {
            id: classificationPanel
            height: parent.height - 20
            width: parent.width
            anchors.left: parent.left
            anchors.top: parent.top
            headerVisible: false
            model:activitiesModel
            backgroundVisible: false
            TableViewColumn {
                role: "name_role"
                title: "classification"//这里是分类的文件夹
                width: classificationItem.width
            }
        }
        RowLayout{
            id:classificationBar
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            width: activities.width * 0.2
            spacing: 0
            anchors.top: classificationPanel.bottom
            ToolButton{
                id:classificationAddBtn
                Layout.fillHeight: true
                Layout.fillWidth: true
                width: classificationItem.width*0.15
                text: "+"
            }
            ToolButton{
                id:classificationDivBtn
                Layout.fillHeight: true
                Layout.fillWidth: true
                width: classificationItem.width*0.15
                text: "-"
            }
            ToolButton{
                id:classificationLftBtn
                Layout.fillHeight: true
                Layout.fillWidth: true
                width: classificationItem.width*0.14
                text: "←"
            }
            ToolButton{
                id:classificationUpBtn
                Layout.fillHeight: true
                Layout.fillWidth: true
                width: classificationItem.width*0.14
                text: "↑"
            }
            ToolButton{
                id:classificationDownBtn
                Layout.fillHeight: true
                Layout.fillWidth: true
                width: classificationItem.width*0.14
                text: "→"
            }
            ToolButton{
                id:classificationRgtBtn
                Layout.fillHeight: true
                Layout.fillWidth: true
                width: classificationItem.width*0.14
                text: "↓"
            }
        }
    }

    Item{
        id:activitiesItem
        anchors.left: classificationItem.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: activities.width * 0.5
        //activeies item
        TreeView {
        id: activitiesPanel
        height: parent.height - 20
        width: parent.width
        anchors.top: parent.top
        anchors.left: parent.left
        headerVisible: false
        backgroundVisible: false
        model: activitiesModel
        itemDelegate: Rectangle {
            //color: ( styleData.row % 2 == 0 ) ? "white" : "lightblue"
            height: 20
            Text {
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left // by default x is set to 0 so this had no effect
                text: styleData.value
            }
        }

        TableViewColumn {
            role: "name_role"
            title: "Name"
            width: activitiesPanel.width *0.7
        }
        TableViewColumn {
            width: activitiesPanel.width *0.15
            role: "name_Context"
            title: "Context"
        }
        TableViewColumn {
            width: activitiesPanel.width *0.15
            role: "name_isFlaged"
            title: "isFlaged"
            delegate: Image {
                id: name1
                source: (styleData.value === "flaged")?"qrc:/Pic/triangle.png":"qrc:/Pic/triangle.png"
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        console.log(styleData.row)
                    }
                }
            }
        }
        }
        RowLayout{
            id:activitiesBar
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            width: activities.width * 0.5
            spacing: 0
            anchors.top: activitiesPanel.bottom
            ToolButton{
                id:activitiesddBtn
                width: 20
                Layout.fillHeight: true
                Layout.fillWidth: true
                text: "+"
            }
            ToolButton{
                id:activitiesDivBtn
                Layout.fillHeight: true
                Layout.fillWidth: true
                width: activitiesItem.width*0.15
                text: "-"
            }
            ToolButton{
                id:activitiesLftBtn
                Layout.fillHeight: true
                Layout.fillWidth: true
                width: activitiesItem.width*0.14
                text: "←"
            }
            ToolButton{
                id:activitiesUpBtn
                Layout.fillHeight: true
                Layout.fillWidth: true
                width: activitiesItem.width*0.14
                text: "↑"
            }
            ToolButton{
                id:activitiesDownBtn
                Layout.fillHeight: true
                Layout.fillWidth: true
                width: activitiesItem.width*0.14
                text: "→"
            }
            ToolButton{
                id:activitiesRgtBtn
                Layout.fillHeight: true
                Layout.fillWidth: true
                width: activitiesItem.width*0.14
                text: "↓"
            }
        }
    }
    Item {
        id: propertyPanel
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: activities.width * 0.3
        visible: true
        anchors.right: parent.right
        Rectangle{
            anchors.fill: parent
            color: "red"
        }
    }


}
